/*
 * @Author: 自迩
 * @Date: 2022-03-09 16:13:23
 * @LastEditTime: 2022-03-10 16:08:26
 * @LastEditors: your name
 * @Description:
 * @FilePath: \silence-reader\src\components\guide\index.jsx
 */
import React, { useEffect, useState } from "react";
import "./index.css";

export default function Guide(props) {
  const [guideClass,setGuideClass]=useState('');
  useEffect(()=>{
    const hasShowGuide=localStorage.getItem("showGuide");
    //如果没有显示过guide的化，显示一次
    if(!hasShowGuide){
      setGuideClass('animate');
    }
  },[])
  const handleGuideClose=()=>{
    setGuideClass('');
    localStorage.setItem("showGuide",true);
  }
  return (
    <>
      <div className={`modal ${guideClass}`}>
        <div className="content">
          <h1>应用介绍</h1>
          <p>这是一个在线阅读书籍的网站，可以通过点击左上方的区域添加本地书籍，并点击书籍进行阅读. </p>
          <button className="trigger" onClick={()=>handleGuideClose()}>Ok, I know</button>
        </div>
      </div>
    </>
  );
}
